<template>
  <div
    style="height: calc(100% - 80px); overflow: auto; display: flex; flex: 1"
  >
    <div class="cardLeft">
      <div
        class="item"
        @click="changeList1(item, 'list1')"
        :style="{
          backgroundColor: item.is
            ? 'rgba(118, 100, 255, 0.18823529411764706)'
            : 'white',
        }"
        v-for="item in list1"
      >
        {{ item.text }}
      </div>
    </div>
    <div class="tableRight">
      <!-- --------------------------------------协同管理员 -->
      <el-table
        v-if="listIndex == '协同管理员'"
        :data="tableData"
        border
        style="width: 100%; border-radius: 15px; height: 100%"
      >
        <el-table-column align="center" type="index" label="序号" width="180">
        </el-table-column>
        <el-table-column align="center" prop="avter" label="头像" width="180">
        </el-table-column>
        <el-table-column align="center" prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column align="center" prop="phone" label="电话" width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="zuzhi"
          label="所属组织"
          width="180"
        >
        </el-table-column>
        <el-table-column align="center" prop="rule" label="角色" width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="zheng"
          label="身份证号"
          width="180"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="geren"
          label="个人资质"
          width="180"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="jianzhu"
          label="建筑资质"
          width="180"
        >
        </el-table-column>
      </el-table>
      <!-- --------------------------------------协同管理员 -->
      <!-- --------------------------------------组织机构 -->
      <el-table
        v-if="listIndex == '组织机构'"
        :data="tableData1"
        border
        style="width: 100%; border-radius: 15px; height: 100%"
      >
        <el-table-column align="center" type="index" label="序号" width="100">
        </el-table-column>
        <el-table-column align="center" prop="className" label="组织名称">
        </el-table-column>
        <el-table-column
          align="center"
          prop="unifiedCreditCode"
          label="统一信用代码"
        >
        </el-table-column>
        <el-table-column align="center" prop="legalPerson" label="法人">
        </el-table-column>
        <el-table-column
          align="center"
          prop="corporatePhoneNumber"
          label="法人电话"
        >
        </el-table-column>
        <el-table-column align="center" prop="contacts" label="联系人">
        </el-table-column>
        <el-table-column
          align="center"
          prop="ContactPhoneNumber"
          label="联系电话"
        >
        </el-table-column>
      </el-table>
      <!-- --------------------------------------组织机构 -->
      <!-- --------------------------------------工人管理 -->
      <el-table
        v-if="listIndex == '工人管理'"
        :data="tableData2"
        border
        style="width: 100%; border-radius: 15px; height: 100%"
      >
        <el-table-column align="center" type="index" label="序号" width="100">
        </el-table-column>
        <el-table-column align="center" prop="name" label="姓名">
        </el-table-column>
        <el-table-column align="center" prop="age" label="年龄">
        </el-table-column>
        <el-table-column align="center" prop="map" label="户籍所在地">
        </el-table-column>
        <el-table-column align="center" prop="newmap" label="现住址">
        </el-table-column>
        <el-table-column align="center" prop="jinjiren" label="紧急联系人">
        </el-table-column>
        <el-table-column
          align="center"
          prop="jinjidianhua"
          label="紧急联系电话"
        >
        </el-table-column>
      </el-table>
      <!-- --------------------------------------工人管理 -->
    </div>

    <!-- --------------------------------添加组织 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="700px"
      :show-close="false"
      class="dialogForm"
    >
      <template slot="title"> <div class="title">新增组织</div></template>
      <div class="dialogDiv">
        <el-form
          label-position="top"
          label-width="80px"
          :model="form"
          :inline="true"
        >
          <el-form-item label="组织名称" style="width: 48%">
            <el-input placeholder="输入" v-model="form.className"></el-input>
          </el-form-item>
          <el-form-item label="统一信用代码" style="width: 48%">
            <el-input
              placeholder="输入"
              v-model="form.unifiedCreditCode"
            ></el-input>
          </el-form-item>
          <el-form-item label="法人" style="width: 48%">
            <el-input placeholder="输入" v-model="form.legalPerson"></el-input>
          </el-form-item>
          <el-form-item label="法人电话" style="width: 48%">
            <el-input
              placeholder="输入"
              v-model="form.corporatePhoneNumber"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人" style="width: 48%">
            <el-input placeholder="输入" v-model="form.contacts"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" style="width: 48%">
            <el-input
              placeholder="输入"
              v-model="form.ContactPhoneNumber"
            ></el-input>
          </el-form-item>
          <el-form-item label="营业执照" style="width: 48%">
            <el-upload
              action="#"
              class="avatar-uploader"
              :limit="1"
              list-type="picture-card"
              :file-list="fileArray"
              :auto-upload="false"
              :on-change="handleAvatarChange"
            >
              <img
                v-if="fileArray.length != 0"
                :src="fileArray[0] && fileArray[0].url"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="建筑资质" style="width: 48%">
            <el-upload
              action="#"
              class="avatar-uploader"
              :limit="1"
              list-type="picture-card"
              :file-list="fileArray"
              :auto-upload="false"
              :on-change="handleAvatarChange"
            >
              <img
                v-if="fileArray.length != 0"
                :src="fileArray[0] && fileArray[0].url"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item style="width: 100%; margin-top: 15px">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="reserve">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!-- --------------------------------添加组织 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      input4: "",
      list1: [
        { text: "组织机构", is: true },
        { text: "协同管理员", is: false },
        { text: "工人管理", is: false },
        { text: "考勤管理", is: false },
      ],
      listIndex: "组织机构",
      tableData: [
        {
          avter: "#",
          name: "name",
          phone: "phone",
          zuzhi: "zuzhi",
          rule: "rule",
          zheng: "zheng",
          geren: "geren",
          jianzhu: "jianzhu",
        },
        {
          avter: "#",
          name: "name",
          phone: "phone",
          zuzhi: "zuzhi",
          rule: "rule",
          zheng: "zheng",
          geren: "geren",
          jianzhu: "jianzhu",
        },
        {
          avter: "#",
          name: "name",
          phone: "phone",
          zuzhi: "zuzhi",
          rule: "rule",
          zheng: "zheng",
          geren: "geren",
          jianzhu: "jianzhu",
        },
      ],
      //组织机构
      tableData1: [
        {
          className: "#",
          unifiedCreditCode: "unifiedCreditCode",
          legalPerson: "legalPerson",
          corporatePhoneNumber: "corporatePhoneNumber",
          contacts: "contacts",
          ContactPhoneNumber: "ContactPhoneNumber",
        },
        {
          className: "#",
          unifiedCreditCode: "unifiedCreditCode",
          legalPerson: "legalPerson",
          corporatePhoneNumber: "corporatePhoneNumber",
          contacts: "contacts",
          ContactPhoneNumber: "ContactPhoneNumber",
        },
        {
          className: "#",
          unifiedCreditCode: "unifiedCreditCode",
          legalPerson: "legalPerson",
          corporatePhoneNumber: "corporatePhoneNumber",
          contacts: "contacts",
          ContactPhoneNumber: "ContactPhoneNumber",
        },
      ],
      //工人管理
      tableData2: [
        {
          name: "#",
          age: "age",
          map: "map",
          newmap: "newmap",
          jinjiren: "jinjiren",
          jinjidianhua: "jinjidianhua",
        },
        {
          name: "#",
          age: "age",
          map: "map",
          newmap: "newmap",
          jinjiren: "jinjiren",
          jinjidianhua: "jinjidianhua",
        },
        {
          name: "#",
          age: "age",
          map: "map",
          newmap: "newmap",
          jinjiren: "jinjiren",
          jinjidianhua: "jinjidianhua",
        },
      ],
      dialogVisible: false,
      form: {},
      activeName: "first",
      imageUrl: "",
      fileArray: [],
    };
  },
  watch: {
    dialogVisible: function (n) {
      if (!n) {
        this.form = {};
      }
    },
  },

  methods: {
    changeList1(item, val) {
      if (val == "list1") {
        this.list1.forEach((ele) => {
          if (ele.text == item.text) {
            ele.is = true;
            this.listIndex = ele.text;
          } else {
            ele.is = false;
          }
        });
      }
    },
    handleClick() {},
    handleAvatarChange(file, fileList) {
      console.log(file, fileList, this.fileArray);
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    submit() {
      this.tableData1.push(this.form);
      this.reserve();
    },
    reserve() {
      this.form = {};
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.cardLeft {
  min-width: 170px;
  height: 200px;
  border-radius: 15px;
  background-color: white;
  text-align: center;
  .item {
    height: 50px;
    line-height: 50px;
  }
  .item:nth-last-of-type(1) {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  .item:nth-last-of-type(4) {
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
  }

  .item:hover {
    background-color: rgba(118, 100, 255, 0.18823529411764706);
  }
}
.tableRight {
  flex: 1;
  margin-left: 15px;
  width: calc(100% - 185px);
}

::v-deep .el-table--scrollable-x .el-table__body-wrapper {
  height: calc(100% - 49px);
}

::v-deep .has-gutter tr th {
  background-color: rgba(242, 242, 242, 1);
}

.dialogDiv {
  height: 700px;
  background-color: white;
}
.title {
  text-align: center;
  font-weight: bold;
  line-height: 70px;
  font-size: 16px;
}

.dialogForm {
  ::v-deep .el-dialog__body {
    padding-top: 0;
  }
  .el-form-item {
    margin-bottom: 0px;
  }
  ::v-deep .el-form-item .el-form-item__label {
    padding-bottom: 0;
    color: black;
  }
}
</style>
